import { Card, Tag, Row, Col } from 'antd'
import { Home } from '@/types/api'
import styles from './card.module.css'
interface PropsType {
  title: string
  tip: string
  dataList: Home.CardItem[]
}
const HomeCard: React.FC<PropsType> = props => {
  return (
    <>
      <Card title={props.title} extra={<Tag color='error'>{props.tip}</Tag>} style={{ marginBottom: 20 }}>
        <Row justify='space-around'>
          {props.dataList.map((item, index) => {
            return (
              <Col key={index} span={5} style={{ textAlign: 'center', background: '#f8f9fa', borderRadius: '10px' }} className={styles.hover}>
                <p>{item.label}</p>
                <p>{item.value}</p>
              </Col>
            )
          })}
        </Row>
      </Card>
    </>
  )
}
export default HomeCard
